Componentes basicos

Componentes basicos para usar en aplicaciones React-Native.

Text

La etiqueta Text nos permite mostrar texto en la aplicacion:

import React from 'react';
import {
  Text,
  View,
} from 'react-native';

const App = () => {
  return (
    <View style={{padding: 10}}>
      <Text style={{padding: 10, fontSize: 42}}>
        Texto de prueba
      </Text>
    </View>
  );
}

export default App;

TextInput

Usamos TextInput para introducir una caja de texto y con Text podemos mostrar un texto por pantalla.

En el siguiente ejemplo se usa un Text para mostrar lo que metamos en el TextInput, hacemos uso tambien de useState para recoger los datos introducido y meterlos dentro de una variable textData.

import React, { useState } from 'react';
import {
  Text,
  TextInput,
  View,
} from 'react-native';


const App = () => {
  const [text, setText] = useState('');
  return (
    <View style={{padding: 10}}>
      <TextInput
        style={{height: 40}}
        placeholder="Escribe un texto"
        onChangeText={newText => setText(newText)}
      />
      <Text style={{padding: 10, fontSize: 42}}>
        {text}
      </Text>
    </View>
  );
}


export default App;

Image

Nos permite cargar una imagen en nuestra aplicación:

import React from 'react';
import {
  Image,
  View,
} from 'react-native';

const App = () => {
  return (
    <View style={{padding: 10}}>
      <Image
        source={{
          uri: 'https://reactnative.dev/docs/assets/p_cat2.png',
        }}
        style={{ width: 200, height: 200 }}
      />
    </View>
  );
}

export default App;

Button

Nos permite incluir un boton en nuestra aplicación:

import React from 'react';
import {
  Button,
  View,
  Alert
} from 'react-native';

const App = () => {
  return (
    <View style={{padding: 10}}>
      <Button
        title="Press me"
        onPress={() => Alert.alert('Simple Button pressed')}
      />
    </View>
  );
}

export default App;

TouchableOpacity

El TouchableOpacity es lo mismo que un Button solo que nos da mas flexibilidad.

En este caso usamos un Text como contenido del TouchableOpacity y a mayores le damos un estilo para que tenga apariencia de boton.

import React from 'react';
import {
  TouchableOpacity,
  Text,
  StyleSheet,
  View,
  Alert
} from 'react-native';

const App = () => {
  return (
    <View style={{padding: 10}}>
      <TouchableOpacity
        style={styles.button}
        onPress={() => Alert.alert("Hola Mundo!!")}
      >
        <Text>Pulsame</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  }
});

export default App;

React Native | Componentes